Improve markdown preview styles - #58465

Closes zed-industries#58364

This PR adjusts heading and body text font size (mostly reducing them a
bit), as well as colors (making the body text slightly darker than
headings), and content separation, through adding a bottom border to
headings until H3.

| Before | After |
|--------|--------|
| <img width="2620" height="2044" alt="Screenshot 2026-06-03 at 5 
01@2x"
src="https://github.com/user-attachments/assets/d10c7916-e4cb-4999-8be1-08e26793fd35"
/> | <img width="2622" height="2044" alt="Screenshot 2026-06-03 at 5 
02@2x"
src="https://github.com/user-attachments/assets/13105982-283d-436b-973e-b6198cd2503b"
/> |

Release Notes:

- Improved markdown preview styles, making it more legible and easier to
parse.

Follow up to zed-industries#58465 adding
more breathing room between headings _and_ making inline code links use
the `accent` text color.

Release Notes:

- N/A

Follow up to zed-industries#58465 adding
more breathing room between headings _and_ making inline code links use
the `accent` text color.

Release Notes:

- N/A

…eview) (#59438)

Cherry-pick of #59291 to preview

----
Follow up to #58465 adding
more breathing room between headings _and_ making inline code links use
the `accent` text color.

Release Notes:

- N/A

Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>

Closes zed-industries#58364

This PR adjusts heading and body text font size (mostly reducing them a
bit), as well as colors (making the body text slightly darker than
headings), and content separation, through adding a bottom border to
headings until H3.

| Before | After |
|--------|--------|
| <img width="2620" height="2044" alt="Screenshot 2026-06-03 at 5 
01@2x"
src="https://github.com/user-attachments/assets/d10c7916-e4cb-4999-8be1-08e26793fd35"
/> | <img width="2622" height="2044" alt="Screenshot 2026-06-03 at 5 
02@2x"
src="https://github.com/user-attachments/assets/13105982-283d-436b-973e-b6198cd2503b"
/> |

Release Notes:

- Improved markdown preview styles, making it more legible and easier to
parse.

Closes zed-industries#58364

This PR adjusts heading and body text font size (mostly reducing them a
bit), as well as colors (making the body text slightly darker than
headings), and content separation, through adding a bottom border to
headings until H3.

| Before | After |
|--------|--------|
| <img width="2620" height="2044" alt="Screenshot 2026-06-03 at 5 
01@2x"
src="https://github.com/user-attachments/assets/d10c7916-e4cb-4999-8be1-08e26793fd35"
/> | <img width="2622" height="2044" alt="Screenshot 2026-06-03 at 5 
02@2x"
src="https://github.com/user-attachments/assets/13105982-283d-436b-973e-b6198cd2503b"
/> |

Release Notes:

- Improved markdown preview styles, making it more legible and easier to
parse.

…rry-pick to preview) (zed-industries#59438)

Cherry-pick of zed-industries#59291 to preview

----
Follow up to zed-industries#58465 adding
more breathing room between headings _and_ making inline code links use
the `accent` text color.

Release Notes:

- N/A

Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>

Follow up to zed-industries#58465 adding
more breathing room between headings _and_ making inline code links use
the `accent` text color.

Release Notes:

- N/A

…ng (zed-industries#63118)

# Objective

The Markdown preview has been collecting complaints about how it reads.
Body text is dimmed and shrunk, headings carry no weight, and paragraphs
sit at a 1.3 line height, so a long document turns into a wall. This
came up in the feedback on zed-industries#58465, in zed-industries#58364, and in the discussion at
zed-industries#43384. This PR changes the defaults so the preview reads like GitHub's
rendering. It adds no settings. The feedback on zed-industries#60402 and zed-industries#59544 was
that a good default beats more knobs, and I agree.

## Solution

What changed in the preview:

- Body text renders at the configured `markdown_preview_font_size`.
Before, it rendered at 92% of that value in a blended muted color. It is
now full contrast at 1:1.
- Line height is 1.5 across body text, lists, and blockquotes.
Paragraphs used to override the base line height with `rems(1.3)`.
- Paragraphs, lists, blockquotes, rules, and code blocks are spaced 16px
apart.
- Headings are semibold, from h1 at 1.75rem down to h6 at 0.85rem. Only
h1 and h2 keep a bottom border, same as GitHub. Dropping the h3 border
addresses the comment on zed-industries#58465 that a line under every heading is too
much.
- Inline code backgrounds are rounded chips instead of square text-run
backgrounds. The chips are tracked in rendered indices so they cover the
code glyphs exactly, and they extend only 1px past the glyphs so the gap
between words stays at full width.
- Code blocks get 12px padding and 6px corners. Links lose their
background tint. Blockquote text is muted. Table cells get 10px
horizontal and 4px vertical padding.

The first commit makes block spacing, table cell padding, and inline
code backgrounds style-driven, with defaults that keep the agent panel,
tooltips, and editor rendering exactly as they are today. The second
commit sets the preview's values. I split it this way so the mechanism
can be reviewed on its own, and so the chip painting can move to its own
PR if you would rather take it separately.

## Testing

- Added a test in the `markdown` crate that checks the inline code chips
cover exactly the code span glyphs, and that no chips are produced when
the corner radius is zero.
- Ran `cargo test -p markdown` and `cargo test -p markdown_preview`
locally, plus `./script/clippy`.
- Smoke-tested the preview on Linux (Arch) against a long document with
headings, lists, blockquotes, tables, and inline code. The screenshots
below are from that run.
- To try it, open any Markdown file and run `markdown: open preview`. It
is also worth glancing at the agent panel and a hover tooltip to confirm
those still look the same, since they share the renderer but keep the
old defaults.
- I could not test on macOS or Windows. Nothing here is
platform-specific, but the chip inset is a fraction of the line height,
so it would be good to have a second pair of eyes on a different font
stack.

## Self-Review Checklist:

- [x] I've reviewed my own diff for quality, security, and reliability
- [x] Unsafe blocks (if any) have justifying comments (there are none)
- [x] The content adheres to Zed's UI standards
([UX/UI](https://github.com/zed-industries/zed/blob/main/CONTRIBUTING.md#uiux-checklist)
and
[icon](https://github.com/zed-industries/zed/blob/main/crates/icons/README.md)
guidelines)
- [x] Tests cover the new/changed behavior
- [x] Performance impact has been considered and is acceptable

## Showcase

| Before | After |
|--------|-------|
| <img width="1420" height="1782" alt="zed_before"
src="https://github.com/user-attachments/assets/84382a52-99d1-43ba-9ee6-d6c3c6cf0cfa"
/> | <img width="1346" height="1800" alt="zed_afterv2"
src="https://github.com/user-attachments/assets/c73c076f-9ba4-4b7d-92dc-20855af595f5"
/> |

Release Notes:

- Improved Markdown preview styling with better typography, spacing, and
rounded inline code backgrounds.

---------

Co-authored-by: Christopher Biscardi <chris@christopherbiscardi.com>

…ng (zed-industries#63118)

# Objective

The Markdown preview has been collecting complaints about how it reads.
Body text is dimmed and shrunk, headings carry no weight, and paragraphs
sit at a 1.3 line height, so a long document turns into a wall. This
came up in the feedback on zed-industries#58465, in zed-industries#58364, and in the discussion at
zed-industries#43384. This PR changes the defaults so the preview reads like GitHub's
rendering. It adds no settings. The feedback on zed-industries#60402 and zed-industries#59544 was
that a good default beats more knobs, and I agree.

## Solution

What changed in the preview:

- Body text renders at the configured `markdown_preview_font_size`.
Before, it rendered at 92% of that value in a blended muted color. It is
now full contrast at 1:1.
- Line height is 1.5 across body text, lists, and blockquotes.
Paragraphs used to override the base line height with `rems(1.3)`.
- Paragraphs, lists, blockquotes, rules, and code blocks are spaced 16px
apart.
- Headings are semibold, from h1 at 1.75rem down to h6 at 0.85rem. Only
h1 and h2 keep a bottom border, same as GitHub. Dropping the h3 border
addresses the comment on zed-industries#58465 that a line under every heading is too
much.
- Inline code backgrounds are rounded chips instead of square text-run
backgrounds. The chips are tracked in rendered indices so they cover the
code glyphs exactly, and they extend only 1px past the glyphs so the gap
between words stays at full width.
- Code blocks get 12px padding and 6px corners. Links lose their
background tint. Blockquote text is muted. Table cells get 10px
horizontal and 4px vertical padding.

The first commit makes block spacing, table cell padding, and inline
code backgrounds style-driven, with defaults that keep the agent panel,
tooltips, and editor rendering exactly as they are today. The second
commit sets the preview's values. I split it this way so the mechanism
can be reviewed on its own, and so the chip painting can move to its own
PR if you would rather take it separately.

## Testing

- Added a test in the `markdown` crate that checks the inline code chips
cover exactly the code span glyphs, and that no chips are produced when
the corner radius is zero.
- Ran `cargo test -p markdown` and `cargo test -p markdown_preview`
locally, plus `./script/clippy`.
- Smoke-tested the preview on Linux (Arch) against a long document with
headings, lists, blockquotes, tables, and inline code. The screenshots
below are from that run.
- To try it, open any Markdown file and run `markdown: open preview`. It
is also worth glancing at the agent panel and a hover tooltip to confirm
those still look the same, since they share the renderer but keep the
old defaults.
- I could not test on macOS or Windows. Nothing here is
platform-specific, but the chip inset is a fraction of the line height,
so it would be good to have a second pair of eyes on a different font
stack.

## Self-Review Checklist:

- [x] I've reviewed my own diff for quality, security, and reliability
- [x] Unsafe blocks (if any) have justifying comments (there are none)
- [x] The content adheres to Zed's UI standards
([UX/UI](https://github.com/zed-industries/zed/blob/main/CONTRIBUTING.md#uiux-checklist)
and
[icon](https://github.com/zed-industries/zed/blob/main/crates/icons/README.md)
guidelines)
- [x] Tests cover the new/changed behavior
- [x] Performance impact has been considered and is acceptable

## Showcase

| Before | After |
|--------|-------|
| <img width="1420" height="1782" alt="zed_before"
src="https://github.com/user-attachments/assets/84382a52-99d1-43ba-9ee6-d6c3c6cf0cfa"
/> | <img width="1346" height="1800" alt="zed_afterv2"
src="https://github.com/user-attachments/assets/c73c076f-9ba4-4b7d-92dc-20855af595f5"
/> |

Release Notes:

- Improved Markdown preview styling with better typography, spacing, and
rounded inline code backgrounds.

---------

Co-authored-by: Christopher Biscardi <chris@christopherbiscardi.com>

…ng (zed-industries#63118)

# Objective

The Markdown preview has been collecting complaints about how it reads.
Body text is dimmed and shrunk, headings carry no weight, and paragraphs
sit at a 1.3 line height, so a long document turns into a wall. This
came up in the feedback on zed-industries#58465, in zed-industries#58364, and in the discussion at
zed-industries#43384. This PR changes the defaults so the preview reads like GitHub's
rendering. It adds no settings. The feedback on zed-industries#60402 and zed-industries#59544 was
that a good default beats more knobs, and I agree.

## Solution

What changed in the preview:

- Body text renders at the configured `markdown_preview_font_size`.
Before, it rendered at 92% of that value in a blended muted color. It is
now full contrast at 1:1.
- Line height is 1.5 across body text, lists, and blockquotes.
Paragraphs used to override the base line height with `rems(1.3)`.
- Paragraphs, lists, blockquotes, rules, and code blocks are spaced 16px
apart.
- Headings are semibold, from h1 at 1.75rem down to h6 at 0.85rem. Only
h1 and h2 keep a bottom border, same as GitHub. Dropping the h3 border
addresses the comment on zed-industries#58465 that a line under every heading is too
much.
- Inline code backgrounds are rounded chips instead of square text-run
backgrounds. The chips are tracked in rendered indices so they cover the
code glyphs exactly, and they extend only 1px past the glyphs so the gap
between words stays at full width.
- Code blocks get 12px padding and 6px corners. Links lose their
background tint. Blockquote text is muted. Table cells get 10px
horizontal and 4px vertical padding.

The first commit makes block spacing, table cell padding, and inline
code backgrounds style-driven, with defaults that keep the agent panel,
tooltips, and editor rendering exactly as they are today. The second
commit sets the preview's values. I split it this way so the mechanism
can be reviewed on its own, and so the chip painting can move to its own
PR if you would rather take it separately.

## Testing

- Added a test in the `markdown` crate that checks the inline code chips
cover exactly the code span glyphs, and that no chips are produced when
the corner radius is zero.
- Ran `cargo test -p markdown` and `cargo test -p markdown_preview`
locally, plus `./script/clippy`.
- Smoke-tested the preview on Linux (Arch) against a long document with
headings, lists, blockquotes, tables, and inline code. The screenshots
below are from that run.
- To try it, open any Markdown file and run `markdown: open preview`. It
is also worth glancing at the agent panel and a hover tooltip to confirm
those still look the same, since they share the renderer but keep the
old defaults.
- I could not test on macOS or Windows. Nothing here is
platform-specific, but the chip inset is a fraction of the line height,
so it would be good to have a second pair of eyes on a different font
stack.

## Self-Review Checklist:

- [x] I've reviewed my own diff for quality, security, and reliability
- [x] Unsafe blocks (if any) have justifying comments (there are none)
- [x] The content adheres to Zed's UI standards
([UX/UI](https://github.com/zed-industries/zed/blob/main/CONTRIBUTING.md#uiux-checklist)
and
[icon](https://github.com/zed-industries/zed/blob/main/crates/icons/README.md)
guidelines)
- [x] Tests cover the new/changed behavior
- [x] Performance impact has been considered and is acceptable

## Showcase

| Before | After |
|--------|-------|
| <img width="1420" height="1782" alt="zed_before"
src="https://github.com/user-attachments/assets/84382a52-99d1-43ba-9ee6-d6c3c6cf0cfa"
/> | <img width="1346" height="1800" alt="zed_afterv2"
src="https://github.com/user-attachments/assets/c73c076f-9ba4-4b7d-92dc-20855af595f5"
/> |

Release Notes:

- Improved Markdown preview styling with better typography, spacing, and
rounded inline code backgrounds.

---------

Co-authored-by: Christopher Biscardi <chris@christopherbiscardi.com>